import React, { useState, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import { BookOutlined } from '@ant-design/icons';
import NovelStore from '../pages/NovelStore';
import { Link, Outlet } from 'react-router-dom';
import { HomeOutlined, VideoCameraOutlined, LinkOutlined, DatabaseOutlined } from '@ant-design/icons';

const { Header, Content, Sider, Footer } = Layout;

const MainLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [selectedKey, setSelectedKey] = useState(localStorage.getItem('selectedMenuKey') || 'home');

  useEffect(() => {
    localStorage.setItem('selectedMenuKey', selectedKey);
  }, [selectedKey]);

  const handleMenuSelect = ({ key }: { key: string }) => {
    setSelectedKey(key);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div style={{ height: '32px', margin: '16px', background: 'rgba(255, 255, 255, 0.2)' }} />
        <Menu
          theme="dark"
          selectedKeys={[selectedKey]}
          onSelect={handleMenuSelect}
          mode="inline"
          items={[
            {
              key: 'home',
              icon: <HomeOutlined />,
              label: <Link to="/">首页</Link>
            },
            {
              key: 'movies',
              icon: <VideoCameraOutlined />,
              label: <Link to="/movies">影视资源管理</Link>
            },
            {
              key: 'novels',
              icon: <BookOutlined />,
              label: <Link to="/novels">小说资源管理</Link>
            },
            {
              key: 'magnet-parser',
              icon: <LinkOutlined />,
              label: <Link to="/magnet-parser">磁力链接解析</Link>
            },
            {
              key: 'dictionary',
              icon: <DatabaseOutlined />,
              label: <Link to="/dictionary">字典管理</Link>
            }
          ]}
        />
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: '0 16px' }}>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 280 }}>
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>个人综合应用系统 ©{new Date().getFullYear()} Created with React & Ant Design</Footer>
      </Layout>
    </Layout>
  );
};

export default MainLayout;